<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单 - 家政服务</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f7f7f7;
            max-width: 750px;
            margin: 0 auto;
        }

        .order-card {
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .order-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .status-tab {
            white-space: nowrap;
            scrollbar-width: none;
        }

        .status-tab::-webkit-scrollbar {
            display: none;
        }

        .active-tab {
            color: #4f46e5;
            border-bottom: 2px solid #4f46e5;
        }

        .nav-tab.active {
            color: #2563eb;
            position: relative;
        }

        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background-color: #2563eb;
            border-radius: 3px;
        }

        .empty-state {
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .cancel-btn {
            background-color: #ef4444;
            transition: all 0.2s ease;
        }

        .cancel-btn:hover {
            background-color: #dc2626;
            transform: translateY(-1px);
        }
    </style>
</head>

<body class="min-h-screen">
    <!-- 顶部导航 -->
    <div class="header flex items-center justify-between px-4 py-3">
        <button class="text-gray-600" onclick="history.back()">
            <i class="fas fa-chevron-left text-lg"></i>
        </button>
        <h1 class="text-lg font-medium">我的订单</h1>
        <div class="w-6"></div> <!-- 占位保持对称 -->
    </div>


    <!-- 筛选区 -->
    <div class="bg-white px-4 py-3 shadow-sm">
        <!-- 状态标签 -->
        <div class="status-tab overflow-x-auto pb-2">
            <div class="flex space-x-6">
                <button class="text-sm font-medium px-1 pb-1 active-tab">全部</button>
                <button class="text-sm font-medium px-1 pb-1 text-gray-500">待付款</button>
                <button class="text-sm font-medium px-1 pb-1 text-gray-500">待签合同</button>
                <button class="text-sm font-medium px-1 pb-1 text-gray-500">待服务</button>
                <button class="text-sm font-medium px-1 pb-1 text-gray-500">待评价</button>
                <button class="text-sm font-medium px-1 pb-1 text-gray-500">已完成</button>
                <button class="text-sm font-medium px-1 pb-1 text-gray-500">已取消</button>
            </div>
        </div>

        <!-- 排序选项 -->
        <div class="mt-3 flex justify-end">
            <div class="relative">
                <select
                    class="appearance-none bg-gray-100 border-0 rounded-full pl-4 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-100">
                    <option>最新订单</option>
                    <option>最早订单</option>
                    <option>金额从高到低</option>
                </select>
                <i class="fas fa-chevron-down absolute right-3 top-2.5 text-gray-400 text-xs"></i>
            </div>
        </div>
    </div>

    <!-- 订单列表 -->
    <div class="px-4 py-4 space-y-4">
        <!-- 订单卡片1 - 待签合同状态 -->
        <div class="order-card bg-white rounded-lg p-4">
            <div class="flex justify-between items-start">
                <div>
                    <h3 class="font-medium text-gray-800">月嫂服务 - 26天</h3>
                    <p class="text-sm text-gray-500 mt-1">2024-06-20 09:00</p>
                </div>
                <span class="px-2 py-1 bg-orange-100 text-orange-600 text-xs rounded-full">待签合同</span>
            </div>
            <div class="flex justify-between items-center mt-4">
                <div>
                    <p class="text-sm text-gray-500">服务人员: 张阿姨</p>
                    <p class="text-sm text-gray-500 mt-1">地址: 北京市朝阳区</p>
                </div>
                <div class="text-right">
                    <p class="font-medium text-gray-800">¥8,800</p>
                    <div class="mt-2 space-x-2">
                        <button class="cancel-btn px-3 py-1 bg-red-500 text-white text-xs rounded-full"
                            onclick="cancelOrder('DD20240620001')">取消订单</button>
                        <button class="px-3 py-1 bg-indigo-600 text-white text-xs rounded-full">联系客服</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 订单卡片2 -->
        <div class="order-card bg-white rounded-lg p-4">
            <div class="flex justify-between items-start">
                <div>
                    <h3 class="font-medium text-gray-800">日常保洁 - 3小时</h3>
                    <p class="text-sm text-gray-500 mt-1">2024-06-15 14:00</p>
                </div>
                <span class="px-2 py-1 bg-indigo-100 text-indigo-600 text-xs rounded-full">待服务</span>
            </div>
            <div class="flex justify-between items-center mt-4">
                <div>
                    <p class="text-sm text-gray-500">服务人员: 李阿姨</p>
                    <p class="text-sm text-gray-500 mt-1">地址: 北京市朝阳区</p>
                </div>
                <div class="text-right">
                    <p class="font-medium text-gray-800">¥198</p>
                    <button class="mt-2 px-3 py-1 bg-indigo-600 text-white text-xs rounded-full">联系客服</button>
                </div>
            </div>
        </div>

        <!-- 订单卡片3 -->
        <div class="order-card bg-white rounded-lg p-4">
            <div class="flex justify-between items-start">
                <div>
                    <h3 class="font-medium text-gray-800">深度清洁 - 4小时</h3>
                    <p class="text-sm text-gray-500 mt-1">2024-06-10 10:00</p>
                </div>
                <span class="px-2 py-1 bg-green-100 text-green-600 text-xs rounded-full">已完成</span>
            </div>
            <div class="flex justify-between items-center mt-4">
                <div>
                    <p class="text-sm text-gray-500">服务人员: 王阿姨</p>
                    <p class="text-sm text-gray-500 mt-1">地址: 北京市海淀区</p>
                </div>
                <div class="text-right">
                    <p class="font-medium text-gray-800">¥298</p>
                    <button class="mt-2 px-3 py-1 bg-gray-200 text-gray-700 text-xs rounded-full">评价服务</button>
                </div>
            </div>
        </div>

        <!-- 空状态 -->
        <!-- <div class="empty-state flex flex-col items-center justify-center py-16">
            <img src="https://s.coze.cn/image/0rY2RoX_EUE/" alt="无订单" class="w-48 h-48 mb-4">
            <p class="text-gray-500">暂无相关订单</p>
            <button class="mt-4 px-6 py-2 bg-indigo-600 text-white rounded-full">去下单</button>
        </div> -->
    </div>

    <!-- 底部导航 -->

    <script>
        // 状态标签切换
        document.querySelectorAll('.status-tab button').forEach(button => {
            button.addEventListener('click', function () {
                document.querySelectorAll('.status-tab button').forEach(btn => {
                    btn.classList.remove('active-tab');
                    btn.classList.add('text-gray-500');
                });
                this.classList.add('active-tab');
                this.classList.remove('text-gray-500');

                // 这里可以添加筛选逻辑
                // 根据实际需求实现订单筛选功能
            });
        });

        // 排序功能
        document.querySelector('select').addEventListener('change', function () {
            // 这里可以添加排序逻辑
            // 根据实际需求实现订单排序功能
        });

        // 取消订单功能
        function cancelOrder(orderId) {
            window.location.href = `order-cancel.html?orderId=${orderId}`;
        }
    </script>
</body>

</html>